<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="zhu.css">
</head>

<body>
    <div class="pindao">
        <div class="left_nav">
            <p class="asidep">新建普通频道</p>
            <p class="asidep">新建自定义频道</p>
            <p class="asidep">修改频道</p>
            <p class="asidep">删除频道</p>
        </div>
        <div class="zi_nav">
            <p class="asidep">新建自定义频道</p>
            <p class="asidep">加入频道</p>
            <p class="asidep">移除频道</p>
        </div>
        <div class="xiu_nav">
            <p class="asidep">修改普通频道</p>
            <p class="asidep">修改自定义频道</p>
        </div>
        <div class="xiuzi_nav">
            <p class="asidep">修改自定义频道</p>
            <p class="asidep">加入频道</p>
            <p class="asidep">移除频道</p>
        </div>
        <div class="show">
            <table>
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>名称</td>
                        <td>前台显示</td>
                        <td>排序</td>
                        <td>自定义频道</td>
                        <td>专题数量</td>
                        <td>文章数量</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox">1
                        </td>
                        <td>时政</td>
                        <td>是</td>
                        <td>1</td>
                        <td>否</td>
                        <td>10</td>
                        <td>100</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</body>
<script src="jquery.js"></script>
<script>
    $('.left_nav p').click(function() {
        if ($(this).index() == 0) {
            $('.show').empty().html('<iframe src="../新建普通/normal.html" frameborder="0"></iframe>')
        }
        if ($(this).index() == 1) {
            $('.show').empty().html('<iframe src="../新建自定义/DIY.html" frameborder="0"></iframe>')
            $('.zi_nav').css('display', 'block')
            $('.left_nav').css('display', 'none')
        }
        if ($(this).index() == 2) {
            $('.show').empty().html('<iframe src="../修改频道/xiu_normal.html" frameborder="0"></iframe>')
            $('.xiu_nav').css('display', 'block')
            $('.zi_nav').css('display', 'none')
            $('.left_nav').css('display', 'none')
            $('.xiu_nav p').click(function() {
                if ($(this).index() == 0) {
                    $('.show').empty().html('<iframe src="../修改频道/xiu_normal.html" frameborder="0"></iframe>')
                }
                if ($(this).index() == 1) {
                    $('.xiuzi_nav').css('display', 'block')
                    $('.xiu_nav').css('display', 'none')
                    $('.zi_nav').css('display', 'none')
                    $('.left_nav').css('display', 'none')
                    $('.show').empty().html('<iframe src="../修改频道/xiu_DIY.html" frameborder="0"></iframe>')
                }
                $(this).addClass('active').siblings().removeClass('active');
            })
        }
        if ($(this).index() == 3) {
            $('.show').empty().html('bc')
        }

        $(this).addClass('active').siblings().removeClass('active');
        // $(this).siblings().removeClass('acive')
    })
</script>

</html>